<script language="javascript">
    // add files
    $(document).ready(function() {
        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');
   
        $('#formupload').ajaxForm({
            dataType:  'json',
            beforeSend: function() {
                $('.progress').show();
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function(xhr) {
                $('.progress').hide();
                if('Ups !! Tipo de archivo no soportado... :(' == xhr.responseText) {
                      alert(xhr.responseText);  
                }else{
                    if('El archivo pesa demasiado, maximo 5 Mb :)' == xhr.responseText)
                        alert(xhr.responseText);
                }
            },
            success: function(data){
                $("#result-attachment").append('<div id="attachment_'+ data.id +'" class="message" style="width: 450px;">'+
                    '<div style="width: 80%; float: left;">'+
                    '<p><img width="16" src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icon_files/_'+data.extension+'.png"/> '+data.name_original+'</p>'+
                    '</div>'+
                    '<div style="width: 20%; float: left; margin-top: 15px;">'+
                    '<a class="delAttach" onclick="return confirm (\'Esta seguro que quiere eliminar el archivo ? \')" rel="'+ data.id +'" href="#">'+
                    '<img src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icn_trash.png"/>'+
                    '</a>'+
                    '</div>'+
                    '</div>');
                $('textarea#description_file').val('');
                $('#myfile').val('');
                alert('Archivo subido con exito.')
            } 
        }); 
    });
</script>
<style>
    .progress { position:relative; width:100px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
    .bar { background-color: #B4F5B4; width:0%; height:10px; border-radius: 3px; }
    .percent { position:absolute; display:inline-block; top:-2px; left:48%; }
</style>

<?php
// IMPORTANTE
// Aqui tenemos que obtener  el ID del proyecto/orden 
// para mostrar todos sus archivos

?>

<article class="module width_half" style="width: 400px;">
    <header><h3>Subir un archivo a la solicitud</h3></header>
    <div class="module_content">
        <form class="formstyle" id="formupload" action="<?php echo $this->url(array('module'=>'solicitud', 'controller'=>'adjuntos', 'action' => 'subir-adjunto')); ?>" method="post" enctype="multipart/form-data">  
            <p>
                <span style="font-style: italic;">* Archivos soportados: gif, jpg, jpeg, png, tif, doc, docx, xls, xlsx, ppt, pptx, pps, ppsx, psd, txt, rtf</span>
            </p>
            <p>
                <input type="hidden" name="code" id="code" value="<?php echo $this->code?>"/>
                <label for="myfile">Elegir archivo a subir </label>
                <input type="file" name="myfile" id="myfile"/>
            </p>    
            <p>
                <label for="description_file">Descripci&oacute;n</label>
                <textarea id="description_file" name="description_file"></textarea>
            </p>
            <div class="progress" style="display: none">
                <div class="bar"></div >
                <div class="percent">0%</div >
            </div> 
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <div class="submit_link">
                <input type="submit" value="Subir Adjunto"/>
            </div>
        </form>
    </div>
    <footer></footer>
</article>